<script lang="ts">
	import type { MemberInfo } from '$lib/api/proto/roadmap_member_api';
	import { appStore } from '$lib/stores/app.svelte';
	import { userStore } from '$lib/stores/user.svelte';
	import { callApi } from '$lib/utils/call_utils';
	import { UserRound } from 'lucide-svelte';
	import moment from 'moment';

	let PAGE_SIZE = 20;

	interface Props {
		roadmapId: string;
	}
	let props: Props = $props();

	let memberList = $state([] as MemberInfo[]);
	let totalCount = $state(0);
	let curPage = $state(0);

	const pageCount = $derived(Math.ceil(totalCount / PAGE_SIZE));

	async function loadMemberList() {
		if (userStore.userSession == null) {
			return;
		}
		const res = await callApi(
			appStore.roadmapMemberApiClient.listMember({
				sessionId: userStore.userSession,
				roadmapId: props.roadmapId,
				offset: PAGE_SIZE * curPage,
				limit: PAGE_SIZE
			}).response
		);
		memberList = res.memberList;
		totalCount = res.totalCount;
	}

	$effect(() => {
		loadMemberList();
	});
</script>

<div class="overflow-x-auto">
	<table class="table">
		<thead>
			<tr>
				<th>用户</th>
				<th>加入时间</th>
				<th>成长计划</th>
			</tr>
		</thead>
		<tbody>
			{#each memberList as member}
				<tr>
					<td>
						<div class="m-1 w-[150px] flex gap-2">
							<div class="avatar">
								<div class="w-[24px] rounded-full">
									{#if member.memberLogouri == ''}
										<UserRound />
									{:else}
										<img alt="avatar" src={member.memberLogouri} />
									{/if}
								</div>
							</div>
							{member.memberDisplayName}
						</div>
					</td>
					<td>{moment(Number(member.joinTime)).format('YYYY-MM-DD HH:mm:ss')}</td>
					<td>{member.planCount}</td>
				</tr>
			{/each}
		</tbody>
	</table>
</div>

{#if pageCount > 1}
	<div class="flex justify-center mt-[20px]">
		<div class="join bg-base-200">
			{#if curPage > 0}
				<button class="join-item btn btn-lg" onclick={() => (curPage = curPage - 1)}>上一页</button>
			{/if}
			{#if curPage != 0}
				<button
					class="join-item btn btn-lg {curPage == 0 ? 'btn-active' : ''}"
					onclick={() => (curPage = 0)}>1</button
				>
			{/if}
			{#if pageCount > 3 && curPage > 1}
				<button class="join-item btn btn-lg btn-disabled">...</button>
			{/if}
			{#if curPage < pageCount}
				<button class="join-item btn btn-lg btn-active">{curPage + 1}</button>
			{/if}
			{#if curPage + 1 < pageCount}
				<button class="join-item btn btn-lg" onclick={() => (curPage += 1)}>{curPage + 2}</button>
			{/if}
			{#if pageCount - curPage > 4}
				<button class="join-item btn btn-lg btn-disabled">...</button>
			{/if}
			{#if pageCount - curPage > 3}
				<button class="join-item btn btn-lg" onclick={() => (curPage = pageCount - 2)}
					>{pageCount - 1}</button
				>
			{/if}
			{#if pageCount - curPage > 2}
				<button class="join-item btn btn-lg" onclick={() => (curPage = pageCount - 1)}
					>{pageCount}</button
				>
			{/if}
			{#if curPage + 1 < pageCount}
				<button class="join-item btn btn-lg" onclick={() => (curPage = curPage + 1)}>下一页</button>
			{/if}
		</div>
	</div>
{/if}
